<template>
  <div>
    <el-card shadow="hover" style="margin-bottom: 10px">
      <div slot="header" class="clearfix">
        <span>设备信息管理</span>
        <el-button type="primary" size="mini" style="float: right; margin-left: 10px" @click="handleAdd">
          <i class="el-icon-plus"></i> 添加设备
        </el-button>
        <el-button type="primary" size="mini" style="float: right" @click="showCategoryTab">
          <i class="el-icon-setting"></i> 设备类别
        </el-button>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-bottom: 10px">
        <el-form-item label="设备编号">
          <el-input v-model="searchForm.code" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.type" placeholder="请选择设备类型">
            <el-option label="所有类型" value=""></el-option>
            <el-option label="传感器" value="sensor"></el-option>
            <el-option label="执行器" value="actuator"></el-option>
            <el-option label="检测设备" value="detector"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="deviceList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="code" label="设备编号"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="type" label="设备类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 'sensor'">传感器</el-tag>
            <el-tag v-else-if="scope.row.type === 'actuator'">执行器</el-tag>
            <el-tag v-else-if="scope.row.type === 'detector'">检测设备</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="model" label="设备型号"></el-table-column>
        <el-table-column prop="plcId" label="所属PLC"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? '正常' : '故障' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button type="info" size="small" @click="handleMaintenanceApply(scope.row)">申请维护</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 设备类别管理 -->
    <el-card shadow="hover" style="margin-bottom: 10px" v-if="showCategory">
      <div slot="header" class="clearfix">
        <span>设备类别管理</span>
        <el-button type="primary" size="mini" style="float: right" @click="handleAddCategory">
          <i class="el-icon-plus"></i> 新增类别
        </el-button>
      </div>
      <el-form :inline="true" :model="categorySearchForm" class="demo-form-inline" style="margin-bottom: 10px">
        <el-form-item label="类别名称">
          <el-input v-model="categorySearchForm.name" placeholder="请输入类别名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCategorySearch">查询</el-button>
          <el-button @click="handleCategoryReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="categoryList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="类别名称"></el-table-column>
        <el-table-column prop="code" label="类别编码"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEditCategory(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-pagination
          @size-change="handleCategorySizeChange"
          @current-change="handleCategoryCurrentChange"
          :current-page="categoryPagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="categoryPagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="categoryPagination.total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 设备维护申请管理 -->
    <el-card shadow="hover" style="margin-bottom: 10px" v-if="showMaintenance">
      <div slot="header" class="clearfix">
        <span>设备维护申请</span>
      </div>
      <el-form :inline="true" :model="maintenanceSearchForm" class="demo-form-inline" style="margin-bottom: 10px">
        <el-form-item label="设备编号">
          <el-input v-model="maintenanceSearchForm.deviceCode" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="申请状态">
          <el-select v-model="maintenanceSearchForm.status" placeholder="请选择申请状态">
            <el-option label="所有状态" value=""></el-option>
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="处理中" value="processing"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleMaintenanceSearch">查询</el-button>
          <el-button @click="handleMaintenanceReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="maintenanceList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="deviceId" label="设备ID"></el-table-column>
        <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="issueDescription" label="问题描述"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 'pending'" type="warning">待处理</el-tag>
            <el-tag v-else-if="scope.row.status === 'processing'" type="info">处理中</el-tag>
            <el-tag v-else-if="scope.row.status === 'completed'" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row.status === 'cancelled'" type="danger">已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleUpdateMaintenance(scope.row)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px">
        <el-pagination
          @size-change="handleMaintenanceSizeChange"
          @current-change="handleMaintenanceCurrentChange"
          :current-page="maintenancePagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="maintenancePagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="maintenancePagination.total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 添加/编辑设备弹窗 -->
    <el-dialog title="设备信息" :visible.sync="dialogVisible" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备编号" prop="code">
          <el-input v-model="form.code" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择设备类型">
            <el-option label="传感器" value="sensor"></el-option>
            <el-option label="执行器" value="actuator"></el-option>
            <el-option label="检测设备" value="detector"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号" prop="model">
          <el-input v-model="form.model" placeholder="请输入设备型号"></el-input>
        </el-form-item>
        <el-form-item label="所属PLC" prop="plcId">
          <el-input v-model="form.plcId" placeholder="请输入所属PLC编号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" title="设备状态开关"></el-switch>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 添加/编辑设备类别弹窗 -->
    <el-dialog title="设备类别信息" :visible.sync="categoryDialogVisible" width="500px">
      <el-form ref="categoryForm" :model="categoryForm" :rules="categoryRules" label-width="100px">
        <el-form-item label="类别名称" prop="name">
          <el-input v-model="categoryForm.name" placeholder="请输入类别名称"></el-input>
        </el-form-item>
        <el-form-item label="类别编码" prop="code">
          <el-input v-model="categoryForm.code" placeholder="请输入类别编码"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="categoryForm.description" placeholder="请输入类别描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="categoryDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCategorySubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 设备维护申请弹窗 -->
    <el-dialog title="设备维护申请" :visible.sync="maintenanceDialogVisible" width="500px">
      <el-form ref="maintenanceForm" :model="maintenanceForm" :rules="maintenanceRules" label-width="100px">
        <el-form-item label="设备ID">
          <el-input v-model="maintenanceForm.deviceId" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="maintenanceForm.deviceCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="maintenanceForm.deviceName" disabled></el-input>
        </el-form-item>
        <el-form-item label="问题描述" prop="issueDescription">
          <el-input type="textarea" v-model="maintenanceForm.issueDescription" placeholder="请详细描述设备问题"></el-input>
        </el-form-item>
        <el-form-item label="申请状态" prop="status" v-if="isUpdateMaintenance">
          <el-select v-model="maintenanceForm.status" placeholder="请选择申请状态">
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="处理中" value="processing"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理备注" v-if="isUpdateMaintenance">
          <el-input type="textarea" v-model="maintenanceForm.processRemark" placeholder="请输入处理备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="maintenanceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleMaintenanceSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import deviceApi from '@/api/device'

export default {
  data() {
    return {
      searchForm: {
        code: '',
        type: ''
      },
      deviceList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      form: {},
      rules: {
        code: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
        model: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
        plcId: [{ required: true, message: '请输入所属PLC编号', trigger: 'blur' }]
      },
      isEdit: false,
      
      // 设备类别管理相关数据
      showCategory: false,
      categorySearchForm: {
        name: ''
      },
      categoryList: [],
      categoryPagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      categoryDialogVisible: false,
      categoryForm: {},
      categoryRules: {
        name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入类别编码', trigger: 'blur' }]
      },
      isEditCategory: false,
      
      // 设备维护申请相关数据
      showMaintenance: false,
      maintenanceSearchForm: {
        deviceCode: '',
        status: ''
      },
      maintenanceList: [],
      maintenancePagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      maintenanceDialogVisible: false,
      maintenanceForm: {},
      maintenanceRules: {
        issueDescription: [{ required: true, message: '请描述设备问题', trigger: 'blur' }],
        status: [{ required: true, message: '请选择申请状态', trigger: 'change' }]
      },
      isUpdateMaintenance: false
    }
  },
  created() {
    this.getDeviceList()
  },
  methods: {
    // 获取设备列表
    getDeviceList() {
      const params = {
        ...this.searchForm,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      
      deviceApi.getDeviceList(params).then(res => {
        if (res.code === 200 && res.data) {
          this.deviceList = res.data.list
          this.pagination.total = res.data.total
        } else {
          // 模拟数据
          this.deviceList = [
            { id: 1, code: 'D001', name: '温度传感器', type: 'sensor', model: 'TS-100', plcId: 'PLC001', status: true, remark: '仓库A区温度监测' },
            { id: 2, code: 'D002', name: '湿度传感器', type: 'sensor', model: 'HS-200', plcId: 'PLC001', status: true, remark: '仓库A区湿度监测' },
            { id: 3, code: 'D003', name: '电机控制器', type: 'actuator', model: 'MC-300', plcId: 'PLC002', status: false, remark: '货架提升控制' },
            { id: 4, code: 'D004', name: '扫码器', type: 'detector', model: 'SC-400', plcId: 'PLC003', status: true, remark: '货物条码识别' }
          ]
          this.pagination.total = this.deviceList.length
        }
      }).catch(err => {
        console.error('获取设备列表失败:', err)
        // 模拟数据
        this.deviceList = [
          { id: 1, code: 'D001', name: '温度传感器', type: 'sensor', model: 'TS-100', plcId: 'PLC001', status: true, remark: '仓库A区温度监测' },
          { id: 2, code: 'D002', name: '湿度传感器', type: 'sensor', model: 'HS-200', plcId: 'PLC001', status: true, remark: '仓库A区湿度监测' },
          { id: 3, code: 'D003', name: '电机控制器', type: 'actuator', model: 'MC-300', plcId: 'PLC002', status: false, remark: '货架提升控制' },
          { id: 4, code: 'D004', name: '扫码器', type: 'detector', model: 'SC-400', plcId: 'PLC003', status: true, remark: '货物条码识别' }
        ]
        this.pagination.total = this.deviceList.length
      })
    },
    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.getDeviceList()
    },
    // 重置
    handleReset() {
      this.searchForm = {
        code: '',
        type: ''
      }
      this.pagination.currentPage = 1
      this.getDeviceList()
    },
    // 添加设备
    handleAdd() {
      this.isEdit = false
      this.form = {
        code: '',
        name: '',
        type: '',
        model: '',
        plcId: '',
        status: true,
        remark: ''
      }
      this.dialogVisible = true
    },
    // 编辑设备
    handleEdit(row) {
      this.isEdit = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    // 删除设备
    handleDelete(id) {
      this.$confirm('确定要删除这条记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用API接口删除设备
        deviceApi.deleteDevice(id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getDeviceList()
          } else {
            this.$message.error(res.msg || '删除失败')
          }
        }).catch(err => {
          console.error('删除设备失败:', err)
          // 模拟删除操作备用
          this.deviceList = this.deviceList.filter(item => item.id !== id)
          this.pagination.total = this.deviceList.length
          this.$message.success('删除成功')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 提交设备表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 调用API接口更新设备
            deviceApi.updateDevice(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success('编辑成功')
                this.dialogVisible = false
                this.getDeviceList()
              } else {
                this.$message.error(res.msg || '编辑失败')
              }
            }).catch(err => {
              console.error('更新设备失败:', err)
              // 模拟编辑操作备用
              const index = this.deviceList.findIndex(item => item.id === this.form.id)
              if (index !== -1) {
                this.deviceList.splice(index, 1, { ...this.form })
              }
              this.$message.success('编辑成功')
              this.dialogVisible = false
            })
          } else {
            // 调用API接口添加设备
            deviceApi.addDevice(this.form).then(res => {
              if (res.code === 200) {
                this.$message.success('添加成功')
                this.dialogVisible = false
                this.getDeviceList()
              } else {
                this.$message.error(res.msg || '添加失败')
              }
            }).catch(err => {
              console.error('添加设备失败:', err)
              // 模拟添加操作备用
              this.form.id = Date.now()
              this.deviceList.unshift({ ...this.form })
              this.pagination.total++
              this.$message.success('添加成功')
              this.dialogVisible = false
            })
          }
        }
      })
    },
    // 分页大小变化
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getDeviceList()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.getDeviceList()
    },
    
    // 设备类别管理相关方法
    // 显示/隐藏设备类别管理
    showCategoryTab() {
      this.showCategory = !this.showCategory
      if (this.showCategory) {
        this.getCategoryList()
        this.showMaintenance = false
      }
    },
    // 获取设备类别列表
    getCategoryList() {
      const params = {
        ...this.categorySearchForm,
        pageNum: this.categoryPagination.currentPage,
        pageSize: this.categoryPagination.pageSize
      }
      
      deviceApi.getDeviceCategoryList(params).then(res => {
        if (res.code === 200 && res.data) {
          this.categoryList = res.data.list
          this.categoryPagination.total = res.data.total
        } else {
          // 模拟数据备用
          this.categoryList = [
            { id: 1, name: '传感器', code: 'sensor', description: '用于检测各种物理量的设备' },
            { id: 2, name: '执行器', code: 'actuator', description: '用于执行控制命令的设备' },
            { id: 3, name: '检测设备', code: 'detector', description: '用于检测特定对象的设备' }
          ]
          this.categoryPagination.total = this.categoryList.length
        }
      }).catch(err => {
        console.error('获取设备类别列表失败:', err)
        // 模拟数据备用
        this.categoryList = [
          { id: 1, name: '传感器', code: 'sensor', description: '用于检测各种物理量的设备' },
          { id: 2, name: '执行器', code: 'actuator', description: '用于执行控制命令的设备' },
          { id: 3, name: '检测设备', code: 'detector', description: '用于检测特定对象的设备' }
        ]
        this.categoryPagination.total = this.categoryList.length
      })
    },
    // 设备类别搜索
    handleCategorySearch() {
      this.categoryPagination.currentPage = 1
      this.getCategoryList()
    },
    // 设备类别重置
    handleCategoryReset() {
      this.categorySearchForm = {
        name: ''
      }
      this.categoryPagination.currentPage = 1
      this.getCategoryList()
    },
    // 添加设备类别
    handleAddCategory() {
      this.isEditCategory = false
      this.categoryForm = {
        name: '',
        code: '',
        description: ''
      }
      this.categoryDialogVisible = true
    },
    // 编辑设备类别
    handleEditCategory(row) {
      this.isEditCategory = true
      this.categoryForm = { ...row }
      this.categoryDialogVisible = true
    },
    // 提交设备类别表单
    handleCategorySubmit() {
      this.$refs.categoryForm.validate((valid) => {
        if (valid) {
          if (this.isEditCategory) {
            // 调用API接口更新设备类别
            deviceApi.updateDeviceCategory(this.categoryForm).then(res => {
              if (res.code === 200) {
                this.$message.success('更新成功')
                this.categoryDialogVisible = false
                this.getCategoryList()
              } else {
                this.$message.error(res.msg || '更新失败')
              }
            }).catch(err => {
              console.error('更新设备类别失败:', err)
              // 模拟更新操作备用
              const index = this.categoryList.findIndex(item => item.id === this.categoryForm.id)
              if (index !== -1) {
                this.categoryList.splice(index, 1, { ...this.categoryForm })
              }
              this.$message.success('更新成功')
              this.categoryDialogVisible = false
            })
          } else {
            // 调用API接口添加设备类别
            deviceApi.addDeviceCategory(this.categoryForm).then(res => {
              if (res.code === 200) {
                this.$message.success('添加成功')
                this.categoryDialogVisible = false
                this.getCategoryList()
              } else {
                this.$message.error(res.msg || '添加失败')
              }
            }).catch(err => {
              console.error('添加设备类别失败:', err)
              // 模拟添加操作备用
              this.categoryForm.id = Date.now()
              this.categoryList.unshift({ ...this.categoryForm })
              this.categoryPagination.total++
              this.$message.success('添加成功')
              this.categoryDialogVisible = false
            })
          }
        }
      })
    },
    // 设备类别分页大小变化
    handleCategorySizeChange(val) {
      this.categoryPagination.pageSize = val
      this.getCategoryList()
    },
    // 设备类别当前页变化
    handleCategoryCurrentChange(val) {
      this.categoryPagination.currentPage = val
      this.getCategoryList()
    },
    
    // 设备维护申请相关方法
    // 显示/隐藏设备维护申请
    showMaintenanceTab() {
      this.showMaintenance = !this.showMaintenance
      if (this.showMaintenance) {
        this.getMaintenanceList()
        this.showCategory = false
      }
    },
    // 获取维护申请列表
    getMaintenanceList() {
      const params = {
        ...this.maintenanceSearchForm,
        pageNum: this.maintenancePagination.currentPage,
        pageSize: this.maintenancePagination.pageSize
      }
      
      deviceApi.getMaintenanceRequestList(params).then(res => {
        if (res.code === 200 && res.data) {
          this.maintenanceList = res.data.list
          this.maintenancePagination.total = res.data.total
        } else {
          // 模拟数据备用
          this.maintenanceList = [
            { id: 1, deviceId: 3, deviceCode: 'D003', deviceName: '电机控制器', issueDescription: '设备运行异常，噪音过大', status: 'pending', applyTime: '2023-06-01 10:30:00' },
            { id: 2, deviceId: 1, deviceCode: 'D001', deviceName: '温度传感器', issueDescription: '读数不准确，需要校准', status: 'processing', applyTime: '2023-06-02 14:20:00' }
          ]
          this.maintenancePagination.total = this.maintenanceList.length
        }
      }).catch(err => {
        console.error('获取维护申请列表失败:', err)
        // 模拟数据备用
        this.maintenanceList = [
          { id: 1, deviceId: 3, deviceCode: 'D003', deviceName: '电机控制器', issueDescription: '设备运行异常，噪音过大', status: 'pending', applyTime: '2023-06-01 10:30:00' },
          { id: 2, deviceId: 1, deviceCode: 'D001', deviceName: '温度传感器', issueDescription: '读数不准确，需要校准', status: 'processing', applyTime: '2023-06-02 14:20:00' }
        ]
        this.maintenancePagination.total = this.maintenanceList.length
      })
    },
    // 维护申请搜索
    handleMaintenanceSearch() {
      this.maintenancePagination.currentPage = 1
      this.getMaintenanceList()
    },
    // 维护申请重置
    handleMaintenanceReset() {
      this.maintenanceSearchForm = {
        deviceCode: '',
        status: ''
      }
      this.maintenancePagination.currentPage = 1
      this.getMaintenanceList()
    },
    // 申请维护
    handleMaintenanceApply(device) {
      this.isUpdateMaintenance = false
      this.maintenanceForm = {
        deviceId: device.id,
        deviceCode: device.code,
        deviceName: device.name,
        issueDescription: '',
        status: 'pending',
        applyTime: new Date().toLocaleString('zh-CN')
      }
      this.maintenanceDialogVisible = true
    },
    // 更新维护申请
    handleUpdateMaintenance(row) {
      this.isUpdateMaintenance = true
      this.maintenanceForm = { ...row }
      this.maintenanceDialogVisible = true
    },
    // 提交维护申请表单
    handleMaintenanceSubmit() {
      this.$refs.maintenanceForm.validate((valid) => {
        if (valid) {
          if (this.isUpdateMaintenance) {
            // 调用API接口更新维护申请
            deviceApi.updateMaintenanceRequest(this.maintenanceForm).then(res => {
              if (res.code === 200) {
                this.$message.success('更新成功')
                this.maintenanceDialogVisible = false
                this.getMaintenanceList()
              } else {
                this.$message.error(res.msg || '更新失败')
              }
            }).catch(err => {
              console.error('更新维护申请失败:', err)
              this.$message.error('更新失败，请稍后重试')
            })
          } else {
            // 调用API接口添加维护申请
            deviceApi.addMaintenanceRequest(this.maintenanceForm).then(res => {
              if (res.code === 200) {
                this.$message.success('申请成功')
                this.maintenanceDialogVisible = false
                // 显示维护申请列表
                this.showMaintenance = true
                this.getMaintenanceList()
              } else {
                this.$message.error(res.msg || '申请失败')
              }
            }).catch(err => {
              console.error('添加维护申请失败:', err)
              this.$message.error('申请失败，请稍后重试')
            })
          }
        }
      })
    },
    // 维护申请分页大小变化
    handleMaintenanceSizeChange(val) {
      this.maintenancePagination.pageSize = val
      this.getMaintenanceList()
    },
    // 维护申请当前页变化
    handleMaintenanceCurrentChange(val) {
      this.maintenancePagination.currentPage = val
      this.getMaintenanceList()
    }
  }
}
</script>

<style scoped>
</style>